<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认订单</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <script src="../module/ydui/ydui.flexible.min.js"></script>
    <link href="../module/ydui/ydui.min.css" rel="stylesheet">
    <style>
        .g-container {
            width: 100%;
            height: 100%;
            background: url("../img/bg.png") no-repeat top left;
            background-size: 100%;
        }

        /************** header begin **************/
        .header {
            width: 100%;
            height: 0.9rem;
            line-height: 0.9rem;
            text-align: center;
            font-size: 0.32rem;
            color: #FFFFFF;
            padding: 0 0.3rem;
            position: relative;
        }

        .header .btn-goback {
            width: 0.9rem;
            height: 0.9rem;
            position: absolute;
            top: 0;
            left: 0.3rem;
        }

        .header .btn-goback:after {
            content: '';
            width: 0.2rem;
            height: 0.34rem;
            background: url("../img/goback.png") no-repeat center center;
            background-size: contain;
            position: absolute;
            top: 0.28rem;
            left: 0;
        }

        /************** header end **************/
        /************** content-wrap begin **************/
        .content-wrap {
            width: 100%;
            /*padding: 0.3rem;*/
            padding: 0.3rem 0.3rem 0;
        }

        .cnt-box {
            width: 100%;
            height: 100%;
            background-color: #fff;
            /*border-radius: 8px;*/
            border-radius: 8px 8px 0 0;
            overflow-x: hidden;
            overflow-y: scroll;
            -webkit-box-shadow: 0 0 20px 2px rgba(162, 162, 162, 0.5);
            -moz-box-shadow: 0 0 20px 2px rgba(162, 162, 162, 0.5);
            box-shadow: 0 0 20px 2px rgba(162, 162, 162, 0.5);
            /*padding: 0.4rem 0.2rem;*/
        }

        /************** content-wrap end **************/

        /************** footer begin **************/
        .footer {
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            background-color: #fff;
            font-size: 0;
            position: fixed;
            left: 0;
            bottom: 0;
        }

        .submit-order-info {
            display: inline-block;
            width: 65%;
            height: 100%;
            border-top: 1px solid #EDEEF0;
            font-size: 0.28rem;
            color: #424451;
            padding: 0 0.7rem 0 0.2rem;
            text-align: right;
        }

        .submit-order-info span {
            color: #DE4E97;
            font-size: 0.32rem;
        }

        .btn-submit {
            display: inline-block;
            width: 35%;
            height: 100%;
            text-align: center;
            background: #DE4E97;
            color: #FFFFFF;
            font-size: 0.3rem;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        /************** footer end **************/

        .goods-info-box {
            width: 100%;
            height: 2.1rem; /*0.3*2+1.5*/
            padding: 0.3rem 1.5rem 0.3rem 1.9rem; /*1.5+0.2+0.2*/
            position: relative;
        }

        .goods-info-box:after {
            content: '';
            width: 100%;
            height: 1px;
            border-bottom: 1px solid #A8B0BA;
            position: absolute;
            bottom: 0;
            left: 0;
            -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
        }

        .gods-info-img {
            display: inline-block;
            width: 1.5rem;
            height: 1.5rem;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 5px;
            position: absolute;
            top: 0.3rem;
            left: 0.2rem;
        }

        .gods-info-tlt {
            width: 100%;
            font-size: 0.28rem;
            color: #424451;
            margin-bottom: 0.2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .gods-info-clrsize {
            font-size: 0.28rem;
            color: #A8B0BA;
        }

        .gods-info-price {
            display: inline-block;
            font-size: 0.3rem;
            color: #424451;
            font-weight: bolder;
            position: absolute;
            top: 0.3rem;
            right: 0.2rem;
        }

        .gods-info-amount {
            display: inline-block;
            color: #A8B0BA;
            font-size: 0.28rem;
            position: absolute;
            top: 0.8rem;
            right: 0.2rem;
        }

        .order-confirm-form-ul {
            width: 100%;
            padding: 0.4rem 0.2rem;
        }

        .order-confirm-form-ul li {
            width: 100%;
            height: 0.8rem;
            line-height: 0.8rem;
            margin-bottom: 0.4rem;
        }

        .order-confirm-form-ul li input {
            width: 100%;
            height: 100%;
            font-size: 0.28rem;
            background: none;
            outline: none;
            border: 1px solid #EDEEF0;
            border-radius: 5px;
            padding: 0 0.2rem;
        }

        .valid-num-li {
            position: relative;
            font-size: 0;
        }

        #inpt_valid_num {
            width: 60%;
            font-size: 0.28rem;
        }

        .btn-send-valid-num {
            display: inline-block;
            width: 35%;
            height: 100%;
            font-size: 0.28rem;
            text-align: center;
            background: #EDEEF0;
            color: #424451;
            border-radius: 5px;
            position: absolute;
            top: 0;
            right: 0;
        }

        .provicecity-li {
            position: relative;
        }

        .provicecity-li:after {
            content: '';
            width: 0.15rem;
            height: 0.25rem;
            background: url("../img/share/goin@3x.png") no-repeat center center;
            background-size: contain;
            position: absolute;
            top: 0.275rem;
            right: 0.2rem;
        }

        .provicecity-li input {
            padding-right: 0.45rem !important;
        }

        .inpt-addres-li {
            height: auto !important;
            line-height: normal;
        }

        #input_addres {
            display: block;
            width: 100%;
            height: 1.5rem;
            border: 1px solid #EDEEF0;
            border-radius: 5px;
            padding: 0.2rem;
            font-size: 0.28rem;
        }
    </style>
</head>
<body>
<section class="g-container">
    <div class="header">
        <span class="btn-goback"></span>
        <span>确认订单</span>
    </div>
    <div class="content-wrap">
        <div class="cnt-box">
            <div class="goods-info-box">
                <div class="gods-info-img" style="background-image: url(../img/default.png)"></div>
                <div class="gods-info-tlt">2015春装新款笔挺括条 纹宽松大 2015春装新款笔挺括条 2015春装新款笔挺括条</div>
                <div class="gods-info-clrsize">颜色:浅蓝色;尺码：XL</div>
                <div class="gods-info-price">￥299.99</div>
                <div class="gods-info-amount">X3</div>
            </div>
            <ul class="order-confirm-form-ul">
                <li>
                    <input type="text" id="inpt_name" placeholder="收货人姓名"/>
                </li>
                <li>
                    <input type="number" id="inpt_phone_num" placeholder="手机号"/>
                </li>
                <li class="valid-num-li">
                    <input type="number" id="inpt_valid_num" placeholder="请写验证码"/>
                    <div class="btn-send-valid-num">获取验证码</div>
                </li>
                <li class="provicecity-li">
                    <input type="text" id="inpt_provicecity" placeholder="省市区"/>
                </li>
                <li class="inpt-addres-li">
                    <textarea id="input_addres" placeholder="详细地址"></textarea>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="submit-order-info">合计:<span>￥521.50</span></div>
        <div class="btn-submit">确认订单</div>
    </div>
</section>
</body>
<script src="../module/jquery/2.1.4/jquery.min.js"></script>
<script>
    //resizeCntHeight
    resizeCntHeight();
    $(window).resize(function () {
        resizeCntHeight();
    });
    function resizeCntHeight() {
        $('.content-wrap').css({height: $('body').height() - $('.header').height() - $('.footer').height() + 'px'});
    }
</script>
</html>